<template>
  <div id="orders" class="app-container">
    <div class="filter-container">
      <!-- 使用搜索组件 -->
      <search-item ref="search" :query="queryInfo" @filter="handleFilter" />
    </div>

    <!-- 表格主体 -->
    <el-table :data="orderList" border fit highlight-current-row stripe>
      <el-table-column label="序号" type="index" width="100px" align="center" />
      <el-table-column label="订单编号" prop="order_number" width="200px" align="center" />
      <el-table-column label="订单价格" prop="order_price" width="200px" align="center" />
      <el-table-column label="是否付款" prop="pay_status" width="200px" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.pay_status !== '1'" type="danger">未付款</el-tag>
          <el-tag v-else type="success">已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否发货" prop="is_send" width="100px" align="center" />
      <el-table-column label="下单时间" prop="create_time" width="200px" align="center">
        <template slot-scope="scope">
          {{ scope.row.create_time | formatTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200px" align="center">
        <template>
          <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="success" icon="el-icon-location">地址</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 使用分页组件 -->
    <pagination-item v-show="total>0" :total="total" :page.sync="queryInfo.pagenum" :limit.sync="queryInfo.pagesize" @pagination="handlePagination" />

    <!-- 使用编辑用户弹框组件 -->
    <!-- <edit-item ref="edit" :dialog="editFormVisible" @close="closeEditDialog" @edit="handleEditOrder" /> -->
  </div>
</template>

<script>
import { ordersList } from '@/api/orders'
// 引用时间过滤器
import { formatTime } from '@/utils/myfiliters'

// 1.导入组件
import SearchItem from './components/search'
// import EditItem from './components/edit'
import PaginationItem from './components/pagination'

export default {
  name: 'Orders',
  // 2.注册组件
  components: {
    'search-item': SearchItem,
    // 'edit-item': EditItem,
    'pagination-item': PaginationItem
  },
  // 添加过滤器
  filters: {
    formatTime // 格式化时间
  },
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      orderList: []
    }
  },
  created() {
    this.getOrdersList()
  },
  methods: {
    // 订单数据列表
    getOrdersList() {
      const data = {
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      }
      // 将拿到的数据发送给后台
      ordersList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 处理搜索后分页，查询就是拿到 query数据，重新分页
    handleFilter(query) {
      const data = {
        query: query.query, // 查询参数，可以为空
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      }
      ordersList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 点击分页器后的分页
    handlePagination() {
      const data = {
        query: this.$refs['search'].queryInfo.query,
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize
      }
      ordersList(data).then((response) => {
        this.apiResult(response)
      })
    },
    // 拿到后台响应的数据，渲染到页面
    apiResult(response) {
      if (response.data.meta.status !== 200) {
        return this.$message.error('获取商品列表失败！')
      }
      this.orderList = response.data.data.goods
      this.total = response.data.data.total
    }
  }
}
</script>

<style scoped>
.filter-container {
  display: flex;
  padding-bottom: 20px;
}
</style>
